<template>
	<div class="edit-slide popup">
		<el-form
			class="content"
			ref="form"
			label-width="100px"
			:rules="RULE_EDIT_EVENT"
			:model="formData"
		>
			<h2 class="center">事件编辑</h2>
			<el-form-item
				label="事件名"
				prop="name"
			>
				<el-input v-model="formData.name" />
			</el-form-item>
			<el-form-item
				label="场景描述"
				prop="description"
			>
				<el-input v-model="formData.description" />
			</el-form-item>
			<el-form-item
				class="data"
				label="额外参数"
			>
				<header>
					<span>key值</span>
					<span>说明</span>
					<i
						class="el-icon-circle-plus-outline"
						@click="onclickAddData"
					/>
				</header>
				<div
					class="input"
					v-for="(item,index) in formData.data"
					:key="index"
				>
					<el-input
						placeholder="key值"
						v-model="item.key"
					/>
					<el-input
						placeholder="说明"
						v-model="item.value"
					/>
					<i
						style="color: #f56c6c;"
						class="el-icon-delete-solid"
						@click="onclickRemoveData(index)"
					/>
				</div>
			</el-form-item>
			<el-form-item class="btns">
				<el-button
					class="sure"
					type="primary"
					plain
					@click="onclickSure"
				>
					确认
				</el-button>
				<el-button
					class="cancel"
					type="info"
					@click="$emit('close')"
				>
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { RULE_EDIT_EVENT } from '@exploit/constants/rule'
export default {
  props: {
    event: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      RULE_EDIT_EVENT,
      formData: {
        eventId: '',
        name: '',
        description: '',
        data: [], // 数组形式展示多个参数，最终合并成对象形式
      }
    }
  },
  created() {
    this.formData.eventId = this.event.eventId
    this.formData.name = this.event.name
    this.formData.description = this.event.description
    /* 结构对象成数组 */
    try {
      const data = JSON.parse(this.event.data)

      for (const key in data) {
        this.formData.data.push({ key, value: data[ key ] })
      }
    } catch (err) { err }
  },
  methods: {
    /**
     * 点击添加额外参数
     */
    onclickAddData() {
      this.formData.data.push({
        key: '',
        value: ''
      })
    },
    /**
     * 点击删除参数
     */
    onclickRemoveData(i) {
      this.$confirm('确认删除该参数?', () => {
        this.formData.data.splice(i, 1)
      })
    },
    /**
     * 点击确认按键，先进行表单验证，然后根据type类型分别调用保存和修改API对比赛信息进行操作
     */
    onclickSure() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {}

          this.formData.data.forEach(item => {
            data[ item.key ] = item.value
          })
          this.$emit('updateEvent', {
            ...this.formData,
            data: JSON.stringify(data)
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.edit-slide {
  .content {
    width: 600px;

    h2 {
      margin-bottom: 10px;
      color: $blue;
    }

    i {
      font-size: $sLarge;
      cursor: pointer;
    }

    .data {
      header {
        display: flex;
        align-items: center;

        span {
          flex: 1;
          text-align: center;
        }
      }

      .input {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .el-input {
          margin: 0 10px;
        }
      }
    }

    .btns {
      .sure {
        width: 30%;
      }
    }
  }
}
</style>
